<template>
   <!--为echarts准备一个具备大小的容器dom-->
   <el-card shadow="always" class="card" id="chartPie"></el-card>
   <el-card shadow="always" class="card" id="main"></el-card >
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "Sstatistics",
    date() {
      return {
        charts: "",
        numm: [],
    };
    },
    methods: {
      drawPieChart() {
      this.chartPie = echarts.init(document.getElementById("chartPie"));
      this.chartPie.setOption({
        title: {
          text: '论坛统计',
          subtext: '论坛数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'righ'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "论坛数据",
            type: "pie",
            radius: [40, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            // 数据源
            data: [
              { value: 60, name: '未来祝福' },
              { value: 38, name: '当前形势' },
              { value: 32, name: '期盼寄语' },
              { value: 30, name: '生活状态' },
              { value: 28, name: '疑问解答' },
              { value: 26, name: '政策解读' },
              { value: 22, name: '生活状况' },
              { value: 18, name: '美好明天' }
              ]
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        backgroundColor: '#2c343c',
  title: {
    text: '论坛统计',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: '期盼' },
        { value: 310, name: '政策' },
        { value: 274, name: '生活' },
        { value: 235, name: '明天' },
        { value: 400, name: '未来' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
      });
    },
  },

  mounted: function () {
      //如果数据同时调用时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
      setTimeout(() => {
        this.drawPie("main");
        this.drawCharts();
      }, 500);
  },
}
</script>

<style scoped>

.card {
  height: 500px;
  width: 94%;
  margin: auto;
  margin-top: 30px;
}
</style>